<template>
	<div class="consignee_tag">
		<div class="tags">
			<template v-for="(item, index) in selectedUsers">
				<el-tag size="small" closable disable-transitions @close="handleCloseTag(item.id)">{{ item.userName }}</el-tag>
			</template>
		</div>
		<el-button type="primary" plain @click="handleOpenSelect()">选择人员</el-button>
		<select-user v-model="openSelect" :data="selectedUsers" @submit="handleSelectUsers"></select-user>
	</div>
</template>

<script>
import selectUser from '@/components/selectUser';
import emitter from 'element-ui/src/mixins/emitter';
export default {
	mixins: [emitter],
	components: { selectUser },
	props: {
		value: { type: Array, default: () => [] }
	},
	data() {
		return {
			selectedUsers: this.value,
			openSelect: false
		};
	},
	watch: {
		value(arr) {
			this.selectedUsers = arr;
		},
		selectedUsers(arr) {
			this.$emit('input', arr);
			this.dispatch('ElFormItem', 'el.form.change', [arr]);
		}
	},
	mounted() {},
	methods: {
		//打开选择人员
		handleOpenSelect() {
			this.openSelect = true;
		},

		//选中人员
		handleSelectUsers(arr) {
			this.openSelect = false;
			this.selectedUsers = [...arr];
		},

		//删除选中人员
		handleCloseTag(id) {
			this.selectedUsers = this.selectedUsers.filter((item) => item.id != id);
		}
	}
};
</script>

<style lang="scss" scoped>
.consignee_tag::v-deep {
	display: flex;
	align-items: flex-start;
	.tags {
		flex: 1;
		display: flex;
		flex-wrap: wrap;
		min-height: 36px;
		margin-right: 10px;
		border-radius: 4px;
		padding: 0 0 5px 5px;
		box-sizing: border-box;
		border: 1px solid #dcdfe6;
	}
	.el-tag {
		margin: 5px 5px 0 0;
	}
	.el-icon-close {
		line-height: 18px;
	}
}
</style>
